<!DOCTYPE HTML>
<html lang="zh" xmlns:th="https://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增通知公告')"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-question-add">
		<div class="form-group">
            <label class="col-sm-3 control-label">题目类型：</label>
            <div class="col-sm-8">
                <select id ="questionType" name="questionType" th:with="type=${@dict.getType('question_type')}"  onchange="changeQuestionType();" required>
                    <option value="">所有</option>
                    <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                            th:value="${dict.dictValue}"></option>
                </select>
            </div>
        </div>                        
        <div class="form-group">
            <label class="col-sm-3 control-label">题目：</label>
            <div class="col-sm-8">
                <input id="content" name="content" value="" placeholder="请输入题目内容" class="form-control" type="text" required>
            </div>
        </div>
        <hr>
         <div id="optionContentId">
         	<div class="form-group  optionValDiv">	
         	  <input id="optionId" name="optionId" value="0"  type="hidden">
              <label class="col-sm-3 control-label"></label>
              <div class="col-sm-1 optionSelTypeCls" style="width: 50px;">
	               	<input class="optionAnswerCls" type="radio"    name="optionAnswer" 
	               	value="0" style="width: 20px;height: 20px;"/>
              </div>
               <div class="col-sm-7">
                   <input id="optionVal0" name="optionVal" value="" class="form-control" type="text" required>
               </div>
              <div class="col-sm-1">
              	<a class="btn btn-danger btn-del" th:onclick="delOption(this,0);">
	                <i class="fa fa-trash"></i> 删除
	            </a>
              </div>
          	</div>
         </div>
        <div class="form-group">
        	<label class="col-sm-3 control-label"></label>
            <div class="col-sm-8">
                <a class="btn btn-success" onclick="addOption();">
              <i class="fa fa-plus"></i> 新增选项
          </a>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script type="text/javascript">
    var prefix = ctx + "king/question";

    $(function () {
    	 //相同name的校验
    	 if ($.validator) {
             $.validator.prototype.elements = function () {
                 var validator = this,
                   rulesCache = {};
                 return $(this.currentForm)
                 .find("input, select, textarea")
                 .not(":submit, :reset, :image, [disabled]")
                 .not(this.settings.ignore)
                 .filter(function () {
                     if (!this.name && validator.settings.debug && window.console) {
                         console.error("%o has no name assigned", this);
                     }
                     rulesCache[this.name] = true;
                     return true;
                 });
             }
         }
    });
     
    
    $("#form-question-add").validate({
    	rules: {
    		questionType: {
    			required: true,
            },
        },
        messages: {
            "questionType": {
            	required: "请选择"
            }
        },
        focusCleanup: true
    });
    
    

    function submitHandler() {
    	if($(".optionValDiv").length<2){
    		$.modal.msgWarning('至少添加两个选项');
    		return false;
    	}
    	$("input[name='optionVal']").each(function() {
        	$(this).rules("add", {required:true,maxlength:200,messages:{required:"必输",maxlength:"最大长达为200字符"}});
        });
    	
    	var optionIndex = 0;
    	$(".optionAnswerCls").each(function(){
    		console.info($(this).attr('checked'));
    		console.info($(this).is(':checked'));
    		
    		if($(this).is(':checked')){
    			$(this).val(optionIndex);
    		}/* else{
    			$(this).val(0);
    		} */
    		optionIndex++;
    	});
    	console.info($('#form-question-edit').serialize());
    	
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-question-add').serialize());
        }
    }
    
  	//添加选项
	function addOption(){
		var questionType = $("#questionType").val();
		if(questionType==''){
			$.modal.msgWarning('请选择题目类型');
			return false;
		}
		var selectTypeStr ="";
		if(questionType=='scq'){
			selectTypeStr = '<input type="radio" class="optionAnswerCls"    name="optionAnswer" value=""  style="width: 20px;height: 20px;"/>';
    	}else if(questionType=='mcq'){
    		selectTypeStr = '<input type="checkbox" class="optionAnswerCls" name="optionAnswer" value=""  style="width: 20px;height: 20px;"/>';
    	}
		var str='<div class="form-group optionValDiv">'+	
					'<input id="optionId" name="optionId" value="0" type="hidden">'+
		            '<label class="col-sm-3 control-label"></label>'+	
		            '<div class="col-sm-1 optionSelTypeCls" style="width: 50px;">'+
		               	selectTypeStr+
		          	'</div>'+
		            '<div class="col-sm-7">'+	
		                '<input id="optionVal'+(new Date()).getTime()+'" name="optionVal" value="" class="form-control" type="text" required>'+	
		            '</div>'+	
		            '<div class="col-sm-1">'+
	                	'<a class="btn btn-danger btn-del" onclick="delOption(this,0);">'+
			                '<i class="fa fa-trash"></i> 删除'+
			           ' </a>'+
	                '</div>'+
		        '</div>';
        $("#optionContentId").append(str);
	}
	
	//删除选项
	function delOption(t,optionId){
		console.info(optionId);
		if(optionId!=0){//删除的选项
			$("#delOptionDiv").append('<input id="delOptinId" name="delOptinId" value="'+optionId+'" type="hidden">');
		}			
		$(t).closest(".optionValDiv").remove();
	}
	
	function changeQuestionType(){
		console.info($("#questionType").val());
		var questionType = $("#questionType").val();
		$(".optionSelTypeCls").each(function() {
        	var str = "";
        	if(questionType=='scq'){
        		str = '<input type="radio" class="optionAnswerCls"    name="optionAnswer" value=""  style="width: 20px;height: 20px;"/>';
        	}else if(questionType=='mcq'){
        		str = '<input type="checkbox" class="optionAnswerCls" name="optionAnswer" value=""  style="width: 20px;height: 20px;"/>';
        	}
        	$(this).html(str);
        });
	}
</script>
</body>
</html>
